<template>
  <div style="padding:12px 20px;">
    <el-card v-loading="loading">
      <div slot="header">
        <h1 style="font-size:22px;font-weight: bolder;text-align: center;">{{ articleData.title }}</h1>
      </div>
      <div>
        <div style="display: flex;align-items: center;">
          <img :src="articleData.user.authorAvatar" style="width: 38px; height: 38px; border-radius: 50%" />
          <span style="padding-left: 4px;font-size: 17px;">
            {{ articleData.user.authorNickname }}
          </span>
          <span style="padding-left: 18px;font-size: 14px;">
            发布于{{ articleData.publishTime }}
          </span>
          <span style="padding-left: 18px;font-size: 14px;">
            {{ articleData.typeName }}专栏
          </span>
        </div>
        <el-image style="width: 100%;height: 468px;" fit='contain' :src="articleData.cover" :preview-src-list="srcList">
        </el-image>
        <v-md-preview :text="articleData.content">
        </v-md-preview>
      </div>
    </el-card>
    <el-card style="margin-top: 8px;">
      <div style="display: flex;justify-content:space-between;align-items: center;">
        <div style="display: flex;align-items: center;">
          <el-button type="text" @click="drawer = true">
            {{ articleData.comment.commentNum }}条评论<i class="el-icon-arrow-right"></i>
          </el-button>
          <div v-if="articleData.comment.userAvatar" style="display: flex;align-items: center;">
            <img :src="articleData.comment.userAvatar"
              style="width: 38px; height: 38px; border-radius: 50%;margin-left: 8px;" />
            <span style="font-size: 17px;margin-left: 4px;color:#909399">
              {{ articleData.comment.nickname }}
            </span>
            <span style="font-size: 17px;margin-left: 22px;">{{ articleData.comment.oneComment }}</span>
          </div>
          <div v-else style="margin-left: 8px;cursor: pointer;" @click="drawer = true">
            <span>还没有用户评论，赶紧前往评论把！</span>
          </div>
        </div>
        <el-button icon="el-icon-edit" @click="drawer = true">
          写评论
        </el-button>
      </div>
    </el-card>

    <el-drawer :title="`评论 ` + articleData.comment.commentNum" :visible.sync="drawer" direction="rtl" size="36%"
      @open="getFirstComment">
      <div style="display: flex;padding:0px 16px; ">
        <img :src="$store.state.userData.avatar" style="width: 28px; height: 28px; border-radius: 50%;" />
        <el-input type="text" maxlength="1000" style="margin-left: 8px;" show-word-limit v-model="addCommentForm.content"
          placeholder="在此留下你的评论吧">
          <el-button slot="append" icon="el-icon-edit" @click="addFirstComment"></el-button>
        </el-input>
      </div>
      <div v-for="item, index in firstComment" :key="item.id" style="display: flex;padding:22px 16px; " class="msg">
        <img :src="item.avatar" style="width: 38px; height: 38px; border-radius: 50%;" />
        <div style="font-size: 14px;margin-left: 8px;display: flex;flex-direction: column;justify-content: space-between;
          width: 90%;">
          <div style="display: flex;justify-content: space-between;">
            <div style="color:#909399">{{ item.nickname }} &nbsp;&nbsp; {{ item.createTime }}</div>
            <span type="text" v-if="item.msgIsExpand" class="msg-action" size="medium" @click="item.msgIsExpand = false">
              <i class="el-icon-message" style="padding-right: 4px;"></i>收起
            </span>
            <span type="text" v-else class="msg-action" size="medium" @click="openMsgIsExpand(index, -1)">
              <i class="el-icon-message" style="padding-right: 4px;"></i>回复
            </span>
          </div>
          <p style="padding:8px 0px;">
            {{ item.content }}
          </p>
          <p v-if="item.childNum > 0" style="color: #409EFF;cursor: pointer;">
            <span v-if="item.childIsExpand" @click="item.childIsExpand = false">收起{{ item.childNum }}条子评论<i
                class="el-icon-arrow-up el-icon--right"></i></span>
            <span v-else @click="getSecondMsg(index)">共有{{ item.childNum }}条子评论<i
                class="el-icon-arrow-down el-icon--right"></i></span>
          </p>
          <div v-if="item.msgIsExpand" style="margin-top: 12px;">
            <el-input type="text" maxlength="1000" style="margin-left: 8px;" show-word-limit
              :placeholder="addChildCommentForm.placeholder" v-model="addChildCommentForm.content">
              <el-button slot="append" icon="el-icon-edit" @click="addChildComment(index)"></el-button>
            </el-input>
          </div>
          <div v-if="item.childNum > 0 && item.childIsExpand">
            <div v-for="item1, index1 in item.childComment" :key="item1.id" class="second-msg">
              <img :src="item1.avatar" style="width: 38px; height: 38px; border-radius: 50%;" />
              <div style="font-size: 14px;margin-left: 4px;display: flex;flex-direction: column;justify-content: space-between;
          width: 90%;">
                <div style="display: flex;justify-content: space-between;">
                  <div style="color:#909399">{{ item1.nickname }} &nbsp;&nbsp;{{ item1.parentId != item.id ?
                    `回复 ` + item1.nickname : '' }} {{ item1.createTime }}</div>
                  <span type="text" v-if="item1.msgIsExpand" class="second-msg-action" size="medium"
                    @click="item1.msgIsExpand = false">
                    <i class="el-icon-message" style="padding-right: 4px;"></i>收起
                  </span>
                  <span type="text" v-else class="second-msg-action" size="medium"
                    @click="openMsgIsExpand(index, index1)">
                    <i class="el-icon-message" style="padding-right: 4px;"></i>回复
                  </span>
                </div>
                <p style="padding:8px 0px;">
                  {{ item1.content }}
                </p>
                <div v-if="item1.msgIsExpand" style="margin-top: 12px;">
                  <el-input type="text" maxlength="1000" style="margin-left: 8px;" show-word-limit
                    :placeholder="addChildCommentForm.placeholder" v-model="addChildCommentForm.content">
                    <el-button slot="append" icon="el-icon-edit" @click="addChildComment(index)"></el-button>
                  </el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>



<script>
import { getArticlesDetailById } from '@/api/controller/4.news/index'
import { getCommentFirstCommentListById, postCommentOne, getCommentSecondCommentListById } from '@/api/controller'

export default {
  mounted() {
    this.getArticleDetail();
  },
  data() {
    let articleData;
    let loading = false;
    let drawer = false;
    let firstCommentPage = {
      pageNum: 1,
      pageSize: 20,
      id: this.$route.params.id
    };
    return {
      loading,
      articleData,
      drawer,
      srcList: [],
      firstComment: [],
      indexForm: {
        beforeIndex: -1,
        beforeChildIndex: -1,
      },
      firstCommentPage,
      addCommentForm: {
        articleId: this.$route.params.id,
        userId: this.$store.state.userData.id,
        content: "",
        parentId: 0,
        firstCommentId: 0
      },
      addChildCommentForm: {
        articleId: this.$route.params.id,
        userId: this.$store.state.userData.id,
        content: "",
        placeholder: "",
        parentId: 0,
        firstCommentId: 0
      },
      secondCommentPage: {
        pageNum: 1,
        pageSize: 20,
        id: 0
      }
    }
  },
  computed: {
    articleId() {
      return this.$route.params.id;
    },
  },
  methods: {
    async getArticleDetail() {
      this.loading = true
      getArticlesDetailById(this.articleId)
        .then((response) => {
          const { data } = response;
          this.articleData = data
          this.srcList = [data.cover]
        })
        .catch((error) => {
          this.$message.error(error.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async getFirstComment() {
      this.firstComment = []
      getCommentFirstCommentListById(this.firstCommentPage)
        .then((response) => {
          const { data } = response;
          data.list.forEach(item => {
            item.msgIsExpand = false
            item.childIsExpand = false
            item.childComment = []
            this.firstComment.push(item)
          });
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    async addFirstComment() {
      if (this.addCommentForm.content == '') {
        this.$message.error('无法发送空消息！')
        return
      }
      postCommentOne(this.addCommentForm)
        .then((response) => {
          const { message } = response;
          this.$message.success(message)
          this.addCommentForm.content = ''
          this.getFirstComment()
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    async addChildComment(index) {
      if (this.addChildCommentForm.content == '') {
        this.$message.error('无法发送空消息！')
        return
      }
      postCommentOne(this.addChildCommentForm)
        .then((response) => {
          const { message } = response;
          this.$message.success(message)
          this.addChildCommentForm.content = ''
          this.firstComment[index].childNum = this.firstComment[index].childNum + 1
          this.getSecondMsg(index)
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    async getSecondMsg(index) {
      this.firstComment[index].childComment = []
      this.secondCommentPage.id = this.firstComment[index].id
      getCommentSecondCommentListById(this.secondCommentPage)
        .then((response) => {
          const { data } = response
          data.list.forEach(item => {
            item.msgIsExpand = false
            this.firstComment[index].childComment.push(item)
          });
          this.firstComment[index].childIsExpand = true
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    openMsgIsExpand(index, index1) {
      if (this.indexForm.beforeIndex >= 0) {
        this.firstComment[this.indexForm.beforeIndex].msgIsExpand = false
        if (this.indexForm.beforeChildIndex >= 0)
          this.firstComment[this.indexForm.beforeIndex].childComment[this.indexForm.beforeChildIndex].msgIsExpand = false
      }
      if (index1 <= -1) {
        this.firstComment[index].msgIsExpand = true
        this.addChildCommentForm.placeholder = '回复：@' + this.firstComment[index].nickname
        this.addChildCommentForm.firstCommentId = this.firstComment[index].id
        this.addChildCommentForm.parentId = this.firstComment[index].id
      } else {
        this.firstComment[index].childComment[index1].msgIsExpand = true
        this.addChildCommentForm.placeholder = '回复：@' + this.firstComment[index].childComment[index1].nickname
        this.addChildCommentForm.firstCommentId = this.firstComment[index].childComment[index1].firstId
        this.addChildCommentForm.parentId = this.firstComment[index].childComment[index1].id
        this.indexForm.beforeIndex = index
      }
      this.indexForm.beforeIndex = index
      this.indexForm.beforeChildIndex = index1
    }
  }
};
</script>

<style scoped>
.msg {
  .msg-action {
    display: none;
    color: #409EFF;
    cursor: pointer;
  }
}

.msg:hover {
  .msg-action {
    display: block;
  }
}

.second-msg {
  display: flex;
  margin: 16px 4px 0px;

  .second-msg-action {
    display: none;
    color: #409EFF;
    cursor: pointer;
  }
}

.second-msg:hover {
  .second-msg-action {
    display: block;
  }
}
</style>